<template>
  <view v-if="state.data">
    <view class="px-3.75 pb-25">
      <view class="flex justify-between items-center py-3 text-28 c-#999">
        <view>币种：{{ currencyName || '-' }}</view>
        <view>负责人：{{ state.data?.business_planning?.nickname || '-' }}</view>
      </view>
      <view v-for="(item, index) in state.data?.plan" :key="index">
        <view class="flex items-center py-3">
          <!-- <view class="flex-1 text-40 c-#333 font-600">{{ item.name }}</view> -->
          <view class="flex-1 text-40 c-#333 font-600">{{ item.year }}年目标</view>
          <!-- <view class="flex-shrink-0 text-32 c-primary">{{ item.year }}年目标</view> -->
        </view>
        <view class="card grid grid-cols-3 gap-3 px-4 py-3.5">
          <view v-for="(target, targetIndex) in item.targetList" :key="targetIndex">
            <view class="text-40 c-#333">{{ target.value }}<text class="text-32">{{ target.unit}}</text></view>
            <view class="text-24 c-#999 mt-1">{{ target.label }}</view>
          </view>
        </view>
        <view class="flex mt-3.75">
          <view class="flex-1 mr-1">
            <view class="pb-2 text-32 c-#333">企业规模</view>
            <view class="card-scale">
              <view v-for="(scale, scaleIndex) in item.scaleList" :key="scaleIndex" class="pt-4 text-white">
                <view class="text-40">{{ scale.value }}{{ scale.unit }}</view>
                <view class="text-24 mt-1">{{ scale.label }}</view>
              </view>
            </view>
          </view>
          <view class="flex-1 ml-1">
            <view class="pb-2 text-32 c-#333">营销规模投入</view>
            <view class="card px-4 pb-4">
              <view v-for="(input, inputIndex) in item.inputList" :key="inputIndex" class="pt-4 c-#333">
                <view class="text-40">{{ input.value }} <text class="text-32">W</text></view>
                <view class="text-24 mt-1">{{ input.label }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="isSocietyManager || isPlanManager" class="bottom-wrap-16 flex items-center px-3.75 bg-white">
      <view class="flex-1 btn-primary_plain" @click="emit('edit')">编辑规划</view>
      <view class="flex-shrink-0 flex items-center ml-5" @click="onExport">
        <image class="w-25 h-28" src="/static/images/common/ic_export.png" />
        <view class="ml-2 text-28 c-#333">导出</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { operateNames } from '@/common/constant/plan'
import { numFormat } from '@/common/util/format'
import { downloadFile } from '@/common/util/util';
import { getBusinessPlanExportUrl } from '@/common/http/module/plan'

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const emit = defineEmits(['edit'])
const props = defineProps({
  data: Object
})

const state = reactive({
  data: ''
})

const currencyName = computed(() => planStore.currency?.label || '未添加')
const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == props.data?.business_planning?.id)

watch(() => props.data, () => parseData())

function parseData() {
  if (!props.data) return
  state.data = {
    ...props.data,
    plan: props.data?.plan.map((item, index) => {
      return {
        ...item,
        name: operateNames[index]?.label,
        targetList: [
          { label: '销售目标', value: numFormat(item.sales_target || 0),unit:'W' },
          { label: '利润目标', value: numFormat(item.profit_target || 0),unit:'W' },
          // { label: '利润率目标', value: numFormat(item.profit_rate_target || 0) },
          { label: '老客户目标', value: numFormat(item.new_customer_target || 0),unit:'人' },
          { label: '新客户目标', value: numFormat(item.new_customer_target || 0),unit:'人' },
        ],
        scaleList: [
          { label: '人数', value: numFormat(item.company_person), unit: '人' },
          { label: '面积', value: numFormat(item.company_area), unit: 'm²' },
        ],
        inputList: [
          { label: '线上', value: numFormat(item.online_investment) },
          { label: '线下', value: numFormat(item.offline_investment) },
        ]
      }
    })
  }
}

function onExport() {
  getBusinessPlanExportUrl(userStore.currentSocietyId, planStore.year).then(res => {
    const url = res.data
    downloadFile(url, '正在导出').then(res => {
      const fileType = url.substring(url.lastIndexOf('.') + 1)
      uni.openDocument({
        filePath: res,
        fileType
      })
    })
  })
}

onMounted(() => parseData())
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -2rpx 4rpx 12rpx 2rpx rgba(206, 143, 12, 0.1);
  overflow: hidden;
}

.card-scale {
  padding: 0 32rpx 32rpx 32rpx;
  border-radius: 12rpx;
  background-color: #F4AF22;
}
</style>
